const path = require('path');

const webpack = require('webpack'); //启用热更新的第二步

const htmlWebpackPlugin = require('html-webpack-plugin'); //只要是插件就要放到plugins中去



module.exports = {
        //配置入口文件
        entry: path.join(__dirname, './src/main.js'), //入口，要使用webpack打包哪个文件
        //配置出口文件
        output: {
            path: path.join(__dirname, './dist'),
            filename: 'bundle.js', //指定输出名称
        },
        //这是配置 dev-server 命令参数的第二种方式
        devServer: {
            open: true,
            port: 3000,
            contentBase: 'src', //设置根目录
            hot: true, // 热更新的第一步
        },
        plugins: [ //配置插件
            new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象 第三步
            new htmlWebpackPlugin({
                template: path.join(__dirname, './src/index.html'), //根据指定的模板页面路径，去生成内存中的页面
                filename: 'index.html', //指定生成的页面名称

            })
        ],
        module: { //用于配置所有第三方的匹配规则
            rules: [
                { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //loader的调用规则是从右向左
                { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
                { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
                {
                    test: /\.(jpg|png|bmp|jpeg)$/,
                    use: 'url-loader?limit=74286&name=[hash:8]-[name].[ext]'
                }, //处理图片路径的loader
                //limit 给定的值是图片的大小单位byte，limit给定的值比图片大会被编码，反之不会
                //会被写成hash数据，如果想保留原来图片的名称使用 &name=[name].[ext]
                //防止路径重名：在图片名称之前加一个8为的hash值&name=[hash:8]-[name].[ext]
                { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
                {
                    test: /\.js$/,
                    exclude: /node_modules/, // 此处要排除该目录

                    use: {
                        loader: 'babel-loader'
                    }
                },


            ]

        }
    }
    // 当我们在控制台输入webpack时，
    //1、首先发现我们没有通过命令的形式，指定入口和出口
    //2、webpack就会去根目录中，查找webpack.config.js 的配置文件
    //3、当找到配置文件时，就会执行这个配置文件，当解析执行完配置文件时，就得到了配置文件中，导出的配置对象
    //4、当webpack拿到配置对象后，就得到了入口和出口信息，然后进行打包